<template>
    <div>
    <el-row>
      <el-col :span="24">
        <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>基础设置</el-breadcrumb-item>
        <el-breadcrumb-item>组织架构管理</el-breadcrumb-item>
      </el-breadcrumb>
      </el-col>
    </el-row>
    <tree-grid
    :treeStructure="true"
    :columns="columns"
    :data-source="dataSource"
    @addOrgUsers="addOrgUsers"
    @addOrg="addOrg"
    @deleteOrg="deleteOrg"
    @editOrg="editOrg"
    @deleteOrgUser="deleteOrgUser"
    >
    </tree-grid>

    <!-- 添加子节点 -->
    <el-dialog title="添加子节点" :visible.sync="addDialogFormVisible" width="20%">
      <el-form :model="addOrgForm" label-width="80px" :rules="rules" ref="addOrgForm">
        <el-form-item label="上级节点" prop="pfullName">
             <el-input v-model="addOrgForm.pfullName" auto-complete="off" disabled></el-input>
        </el-form-item>
        <el-form-item label="机构类型" prop="orgClassID">
          <el-select v-model="addOrgForm.orgClassID" placeholder="请选择机构类型">
             <el-option label="公司" value=2 ></el-option>
             <el-option label="部门" value=3 ></el-option>
             <el-option label="岗位" value=4 ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="全称" prop="fullName">
          <el-input v-model="addOrgForm.fullName" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="简称" prop="shortName">
          <el-input v-model="addOrgForm.shortName" auto-complete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addDialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addOrgSubmit('addOrgForm')">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 编辑子节点 -->
    <el-dialog title="修改子节点" :visible.sync="editDialogFormVisible" width="20%">
      <el-form :model="editOrgForm" label-width="80px" :rules="rules" ref="editOrgForm">
        <el-form-item label="机构类型" prop="orgClassID">
          <el-select v-model="editOrgForm.orgClassID" placeholder="请选择机构类型">
              <el-option
               v-for="item in orgClass"
               :key="item.value"
               :label="item.label"
               :value="item.value">
              </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="全称" prop="fullName">
          <el-input v-model="editOrgForm.fullName" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="简称" prop="shortName">
          <el-input v-model="editOrgForm.shortName" auto-complete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="editDialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="editOrgSubmit('editOrgForm')">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 加载未绑定组织机构用户 -->
    <el-dialog title="加载未绑定组织机构用户" :visible.sync="addOrgUserDialogFormVisible">
      <!-- <el-tag  v-for="user in unOrgUsers" :key="user.name" :type="user.type">{{user.name}}</el-tag> -->
      <el-row :gutter="80" >
         <el-col :span="12">
          <el-input placeholder="请输入用户" prefix-icon="el-icon-search" v-model="searchuser"></el-input>
      </el-col>
      </el-row>
      <el-row :gutter="80" >
        <el-checkbox-group v-model="checkedUsers">
         <el-col :span="6" v-for="user in newunOrgUsers" :key="user.ID">
            <el-checkbox  :label="user.ID" >{{user.name}}</el-checkbox>
         </el-col>
        </el-checkbox-group>
      </el-row>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addOrgUserDialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addOrgUsersSubmit">确 定</el-button>
      </div>
    </el-dialog>
    </div>
</template>
<script>
import TreeGrid from '@/components/TreeGrid/TreeGrid'
import { getOrgList, addOrgChild, deleteOrg, editOrg, getfreeUsers, addOrgUsers, deleteOrgUser } from '@/api'
export default {
  data () {
    return {
      dataSource: [],
      searchuser: '',
      columns: [{
        text: '组织机构名称',
        dataIndex: 'shortName',
        width: '400'
      }],
      orgClass: [{
        value: 2,
        label: '公司'
      }, {
        value: 3,
        label: '部门'
      }, {
        value: 4,
        label: '岗位'
      }],
      addDialogFormVisible: false,
      addOrgForm: {
        pid: '',
        pfullName: '',
        orgClassID: '',
        fullName: '',
        shortName: ''
      },
      editDialogFormVisible: false,
      editOrgForm: {
        id: '',
        orgClassID: '',
        fullName: '',
        shortName: ''
      },
      // 添加子节点表单验证
      rules: {
        orgClassID: [
          { required: true, message: '请选择机构类型', trigger: 'blur' }
        ],
        shortName: [
          { required: true, message: '请输入简称', trigger: 'blur' }
        ]
      },
      addOrgUserDialogFormVisible: false,
      // 未绑定机构的用户
      unOrgUsers: [],
      checkedUsers: [],
      // 选中的机构id
      orgid: ''
    }
  },
  components: {
    TreeGrid
  },
  created () {
    this.initList()
  },
  methods: {
    // 加载组织机构用户弹出
    addOrgUsers (row) {
      this.addOrgUserDialogFormVisible = true
      this.orgid = row.id
      getfreeUsers().then(res => {
        if (res.code === 200) {
          this.unOrgUsers = []
          let freeusers = res.data
          if (freeusers.length > 0) {
            freeusers.forEach(user => {
              this.unOrgUsers.push({
                ID: user.ID,
                name: user.UserCName + '(' + user.UserName + ')'
                // type: user.RecordState === 1 ? 'success':'danger'
              })
            })
          }
        }
      })
    },
    // 添加子节点弹出
    addOrg (row) {
      this.addDialogFormVisible = true
      this.addOrgForm.pfullName = row.fullName
      this.addOrgForm.pid = row.id
    },
    // 删除组织机构
    deleteOrg (orgid) {
      this.$confirm('此操作将永久删除该组织机构, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 执行删除用户操作
        deleteOrg(orgid).then(res => {
          if (res.code === 200) {
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
            this.initList()
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 删除组织机构的用户
    deleteOrgUser (orgid, userid) {
      let userids = []
      userids.push(userid)
      this.$confirm('此操作将删除该组织机构的用户, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 执行删除用户操作
        deleteOrgUser(orgid, { data: userids }).then(res => {
          if (res.code === 200) {
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
            this.initList()
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    editOrg (row) {
      this.editDialogFormVisible = true
      this.editOrgForm.id = row.id
      this.editOrgForm.orgClassID = row.nodeType
      this.editOrgForm.fullName = row.fullName
      this.editOrgForm.shortName = row.shortName
    },
    initList () {
      getOrgList(0).then(res => {
        if (res.code === 200) {
          this.dataSource = res.data
        } else {
          this.$message({
            type: 'warning',
            message: res.msg
          })
        }
      })
    },
    // 添加子节点
    addOrgSubmit (formName) {
      this.$refs[formName].validate(valide => {
        if (valide) {
          // 执行添加子节点方法
          addOrgChild({
            pid: this.addOrgForm.pid,
            shortName: this.addOrgForm.shortName,
            orgClassID: this.addOrgForm.orgClassID
          }).then(res => {
            if (res.code === 200) {
              this.$message({
                type: 'success',
                message: '创建节点成功'
              })
              this.addDialogFormVisible = false
              this.initList()
            }
          })
        }
      })
    },
    // 保存编辑子节点
    editOrgSubmit (formName) {
      this.$refs[formName].validate(valide => {
        if (valide) {
          editOrg({
            id: this.editOrgForm.id,
            shortName: this.editOrgForm.shortName,
            orgClassID: this.editOrgForm.orgClassID
          }).then(res => {
            if (res.code === 200) {
              this.$message({
                type: 'success',
                message: '编辑成功'
              })
              this.editDialogFormVisible = false
              this.initList()
            }
          })
        }
      })
    },
    // 保存添加组织机构用户
    addOrgUsersSubmit () {
      if (this.checkedUsers.length <= 0) {
        this.$message({
          type: 'warring',
          message: '请勾选用户'
        })
      } else {
        addOrgUsers(this.orgid, this.checkedUsers).then(res => {
          if (res.code === 200) {
            this.$message({
              type: 'success',
              message: '加载用户成功'
            })
            this.addOrgUserDialogFormVisible = false
            this.initList()
          }
        })
      }
    }
  },
  computed: {
    newunOrgUsers () {
      return this.unOrgUsers.filter(value => value.name.indexOf(this.searchuser) !== -1)
    }
  }
}
</script>
<style lang="scss" scoped>

</style>
